<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>场地详细-欢聚网</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/common/mui.min.css">
	<link rel="stylesheet" href="../css/common/mui.extra.css">
	<link rel="stylesheet" href="../css/common/icons-extra.css">
	<link rel="stylesheet" href="../css/common/common.css">
	<link rel="stylesheet" href="../css/priceCalenar.css">
	<link rel="stylesheet" href="../css/common/share.css">
	<style>
		.mui-table-view:before,
		.mui-table-view:after {
			background: none !important;
		}
			img{max-width:100%;}
	</style>
</head>

<body class="cj-bg-light-grey">
	<header id="header" class="mui-bar mui-bar-nav mui-white-nav-bar">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title" id="addCollect">场地详细</h1>
		<span onclick="_system._guide(true)" class="cj-margin-top-10 mui-icon-extra mui-icon-extra-share mui-pull-right"></span>
		<a class="cj-margin-top-10 mui-icon-extra mui-icon-extra-heart mui-pull-right"></a>
	</header>

	<!--下拉刷新容器-->
	<div id="pullrefresh" class="mui-content cj-bg-light-grey mui-scroll-wrapper mui-content-phone cj-car-scroll">
		<div class="mui-scroll">
			<div id="goodInfo">

			</div>


			<!-- 预定价格 -->
		</div>
		<div id="item2" class="mui-content-padded  mui-control-content">

		</div>
	</div>
	<div class="cj-line-30"></div>
	<div class="cj-line-30"></div>
	<div class="cj-line-40"></div>
	<nav class="mui-bar mui-bar-tab cj-bg-white  cj-none-border cj-padded-0">
		<div class="mui-row">
			<div class="mui-col-sm-6 mui-col-xs-6 mui-bar-div">
				<button style="top:0;" type="button" onclick="wechat() " class="mui-btn-block ">微信咨询</button>
			</div>
			<div class="mui-col-sm-6 mui-col-xs-6">
				<button style="top:0;" type="button" id="addCar" class="mui-btn-primary mui-btn-block ">加入清单</button>
			</div>
		</div>
	</nav>
	<div id="cover"></div>
	<div id="guide"><img src="/img/share.png"></div>
	<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
	<script type="text/html" id="goodInfoTpl">
		<div class="mui-content cj-bg-light-grey" id="imgSlider">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="<%==imgs[imgs.length-1].imgUrl%>">
						</a>
					</div>
					<% for(var i=0;i<imgs.length;i++){%>
						<div class="mui-slider-item">
							<a href="#">
							<img src="<%==imgs[i].imgUrl%>">
						</a>
						</div>
						<%}%>
							<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
							<img src="<%==imgs[imgs.length-1].imgUrl%>">
						</a>
							</div>

				</div>
				<div class="mui-slider-indicator mui-slider-num">
					<span class="mui-silder-block"><span id="sliderNum">1</span>/<%==imgs.length%></span>
				</div>
			</div>
			<div class="mui-content cj-padded-10 cj-bg-white">
				<h4 class="cj-text-size-16"><%==title%></h4>
				<p class="cj-text-size-12 cj-margin-bottom-0">
					<%==room_num%>房 |
						<%==bed_num%>床 | 宜居
							<%==apply%>人</p>
				<div>
					<%
						 	tag = tags.split("|");
							for(var i=0;i<tag.length;i++){
						 %>
						<span class="mui-badge mui-badge-primary"><%==tag[i]%></span>
						<%}%>
				</div>
				<p class="cj-text-size-12 cj-margin-top-10 cj-overflow cj-margin-bottom-0">
					<span class="mui-pull-left">地址：<%==address%></span>
					<span class="mui-icon mui-icon-location mui-pull-right cj-text-size-18 cj-text-color-primary"></span>
				</p>
			</div>
		</div>
		<div class="cj-line-20"></div>
		<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary cj-bg-white">
			<a class="mui-control-item mui-active" href="#item1">
				场地详细
				</a>
			<a class="mui-control-item" href="#item2">
				预定价格
				</a>
		</div>
		<!-- 场地详细 -->
		<div class="mui-content mui-control-content mui-active" id="item1">
			<!-- 别墅介绍 -->
			<div>
				<p class="mui-text-center cj-line-height-30 cj-margin-bottom-0">
					<span class="mui-icon mui-icon-minus cj-text-size-16"></span> &nbsp;详细介绍
				</p>
				<div class="cj-bg-white cj-padded-10 cj-content-card" style="max-height:400px;" data-height="400px">
					<%==description%>
				</div>
				<div class="cj-bg-white mui-text-center ">
					<button type="button" class="mui-btn mui-min-bth cj-margin-tb-10 btn-more ">更多</button>
				</div>
			</div>
			<div>
				<p class="mui-text-center cj-line-height-30 cj-margin-bottom-0">
					<span class="mui-icon mui-icon-minus cj-text-size-16"></span> &nbsp;配套设施
				</p>
				<div class="cj-bg-white cj-padded-10 cj-content-card" style="max-height:132px;" data-height="132px">
					<div class="mui-row">
						<%
								facilitiesImg = facilities.split("|");
								for(var i=1;i<=facilitiesImg.length;i++){
							%>
							<div class="mui-col-xs-2 mui-col-sm-2">
								<img class="mui-icon cj-icon-size-60" src="../img/facilities/<%==i%>.png">
							</div>
							<%}%>
					</div>
				</div>
				<div class="cj-bg-white mui-text-center ">
					<button type="button" class="mui-btn mui-min-bth cj-margin-tb-10 btn-more ">更多</button>
				</div>
			</div>

			<div>
				<p class="mui-text-center cj-line-height-30 cj-margin-bottom-0">
					<span class="mui-icon mui-icon-minus cj-text-size-16"></span> &nbsp;补充介绍
				</p>
				<div class="cj-bg-white cj-padded-10 cj-content-card" style="max-height:60px;" data-height="60px">
					<%==reference%>
				</div>
				<div class="cj-bg-white mui-text-center ">
					<button type="button" class="mui-btn mui-min-bth cj-margin-tb-10 btn-more ">更多</button>
				</div>
			</div>

			<div>
				<p class="mui-text-center cj-line-height-30 cj-margin-bottom-0">
					<span class="mui-icon mui-icon-minus cj-text-size-16"></span> &nbsp;温馨提示
				</p>
				<div class="cj-bg-white cj-padded-10 cj-content-card" style="max-height:150px;" data-height="150px">
					<%==remind%>
				</div>
				<div class="cj-bg-white mui-text-center ">
					<button type="button" class="mui-btn mui-min-bth cj-margin-tb-10 btn-more ">更多</button>
				</div>
			</div>
			<div id="discuss">

			</div>
			<div id="recommend">

			</div>
		</div>
		<div class="mui-content mui-control-content" id="item2">
			<div class="cj-price-calenar" id="priceCalenar">
			</div>
			<div style="height:80px;"></div>
		</div>
	</script>
	<script type="text/html" id="recommendTpl">
		<p class="mui-text-center cj-line-height-30 cj-margin-bottom-0">
			<span class="mui-icon mui-icon-minus cj-text-size-16"></span> &nbsp;猜你喜欢
		</p>
		<div class="cj-bg-white cj-padded-10 cj-content-card">
			<ul class="mui-table-view">
				<% for(var i=0;i<result.length;i++){  %>
					<li class="mui-table-view-cell mui-media">
						<a href="/site/detail?id=<%==result[i].siid%>">
							<img class="mui-media-object mui-pull-left" src="<%==result[i].imgs==0?'':result[i].imgs[0].imgUrl%>"/>
							<div class="mui-media-body">
								<%==result[i].title%>
								<p class='mui-ellipsis'>
									<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined mui-min-bth">￥<%==result[i].price%></button>
								</p>
							</div>
						</a>
					</li>
					<%}%>
			</ul>
		</div>
	</script>
	<script type="text/html" id="discussTpl">
		<p class="mui-text-center cj-line-height-30 cj-margin-bottom-0">
			<span class="mui-icon mui-icon-minus cj-text-size-16"></span> &nbsp;用户评价
		</p>
		<div class="cj-bg-white cj-padded-10 cj-content-card">
			<ul class="mui-table-view">
				<% for(var i=0;i<$data.length;i++){ %>
					<li class="mui-table-view-cell mui-media">
						<img class="mui-media-object mui-pull-left cj-commit-detail-img" src="../img/icon-1.png">
						<div class="mui-media-body">
							<p class='mui-ellipsis'>
								<p class='mui-ellipsis' style="font-size:12px;" style="width:100%" ;>
									<span><%==$data[i].user.nickname%>&nbsp;&nbsp;2017-06-15&nbsp;</span>
								</p>
							</p>
						</div>
						<p class="cj-line-10"></p>
						<p class="cj-line-height-30">
							<%==$data[i].content%>
						</p>
					</li>
					<%}%>
			</ul>
		</div>
		<div class="cj-bg-white mui-text-center ">
			<button type="button" id="moreDiscuss" class="mui-btn mui-min-bth cj-margin-tb-10  ">查看更多评价</button>
		</div>
	</script>
	<script src="../js/common/template-web.js"></script>
	<script src="../js/common/mui.min.js"></script>
	<script src="../js/common/mui.href.js"></script>
	<script src="../js/common/jquery.min.js"></script>
	<script src="../js/common/share.js"></script>
	<script src="../js/common/common.js"></script>
	<script src="../js/common/public.js"></script>
	<script src="../js/site/PriceCalenar.js"></script>
	<script src="../js/site/detail.js"></script>
</body>

</html>
